<script lang="ts" setup>
import Plate from "./Plate.vue";
import Chart from "@/components/Charts/Chart.vue";
import * as echarts from "echarts";
import { reactive } from "vue";

// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx: any, shape: any) {
    // 会canvas的应该都能看得懂，shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x + 7, shape.y];
    const c1 = [shape.x - 23, shape.y - 6];
    const c2 = [xAxisPoint[0] - 23, xAxisPoint[1] - 13];
    const c3 = [xAxisPoint[0] + 7, xAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  },
});
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx: any, shape: any) {
    const xAxisPoint = shape.xAxisPoint;
    const c1 = [shape.x + 7, shape.y];
    const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
    const c3 = [xAxisPoint[0] + 25, xAxisPoint[1] - 15];
    const c4 = [shape.x + 25, shape.y - 15];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  },
});
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx: any, shape: any) {
    const c1 = [shape.x + 7, shape.y];
    const c2 = [shape.x + 25, shape.y - 15]; //右点
    const c3 = [shape.x - 5, shape.y - 20];
    const c4 = [shape.x - 23, shape.y - 6];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  },
});
// 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);
const VALUE = [200, 300, 350, 320, 350];
const option = {
  backgroundColor: "transparent",
  title: {
    text: "舆情数量（单位：个）",
    textStyle: {
      color: "#7ebaf2",
      fontWeight: "800",
      fontSize: 12,
    },
    left: "18px",
    top: "1%",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    formatter: (params: any) => params[1].value,
    // formatter: function (params, ticket, callback) {
    //   const item = params[1];
    //   return item.name + " : " + item.value;
    // },
  },
  grid: {
    left: "5%",
    right: "5%",
    top: "12%",
    bottom: "5%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: ["星期一", "星期二", "星期三", "星期四", "星期五"],
    axisLine: {
      show: true,
      lineStyle: {
        color: "#7ebaf2",
      },
    },
    axisTick: {
      show: false,
      length: 9,
      alignWithLabel: true,
      lineStyle: {
        color: "#7DFFFD",
      },
    },
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: {
    type: "value",
    min: 0,
    axisLine: {
      show: true,
      lineStyle: {
        color: "#7ebaf2",
      },
    },
    splitLine: {
      show: false,
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: ["rgba(26,50,83,1)", "rgba(30,57,92,1)"],
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 12,
    },
    boundaryGap: ["20%", "20%"],
  },
  series: [
    {
      type: "custom",
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)]);
        // console.log(location);
        return {
          type: "group",
          children: [
            {
              type: "CubeLeft",

              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(62,255,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,126,191,1)",
                  },
                ]),
              },
            },
            {
              type: "CubeRight",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(23,176,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,138,255,0.3)",
                  },
                ]),
              },
            },
            {
              type: "CubeTop",
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(163,232,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(163,232,255,1)",
                  },
                ]),
              },
            },
          ],
        };
      },
      data: VALUE,
    },
    {
      type: "bar",
      label: {
        show: true,
        position: "top",
        fontSize: 14,
        color: "#fff",
        offset: [2, -25],
      },
      itemStyle: {
        color: "transparent",
      },
      tooltip: {},
      data: VALUE,
    },
  ],
};
</script>

<template>
  <Plate title="舆情监测分析">
    <Chart :option="option" />
  </Plate>
</template>

<style lang="less" scoped></style>
